<div class="cp-estate-filter fixed-top border-bottom">
  <div class="item" (click)="toggleShow('areaShow')" [class.active]="areaShow || middleSelected.Value">
    <span class="text">{{ areaText }}</span> <i class="icon icon-{{ areaShow ? 'jiantoushang' : 'jiantouxia' }}"></i>
  </div>
  <div class="item" (click)="toggleShow('priceShow')" [class.active]="priceShow || priceValue.value !== '不限'">
    <span class="text">{{ priceValue.value === '不限' ? '价格' : priceValue.value }}</span>
    <i class="icon icon-jiantouxia"></i>
  </div>
  <div class="item" (click)="toggleShow('layoutShow')" [class.active]="layoutShow || layoutValue.length > 0">
    <span class="text">{{ layoutText }}</span>
    <i class="icon icon-{{ layoutShow ? 'jiantoushang' : 'jiantouxia' }}"></i>
  </div>
  <div class="item" (click)="toggleShow('moreShow')" [class.active]="moreShow || moreText !== '更多'">
    <span class="text">{{ moreText }}</span> <i class="icon icon-{{ moreShow ? 'jiantoushang' : 'jiantouxia' }}"></i>
  </div>
</div>

<!-- 区域 -->
<cp-popup [(show)]="areaShow" [maskClick]="true" otherClass="estate-index-popup">
  <div class="areabox">
    <div class="body">
      <div class="left">
        <div class="item border-bottom" (click)="selectAreaType(1)" [class.active]="areaType === 1">区域</div>
        <div class="item border-bottom" (click)="selectAreaType(2)" [class.active]="areaType === 2">地铁</div>
        <div class="item" (click)="selectAreaType(3)" [class.active]="areaType === 3">附近</div>
      </div>
      <!-- 区域 -->
      <div class="middle" *ngIf="areaType === 1">
        <div
          class="item border-bottom"
          [class.active]="middleSelected.Name === '不限'"
          (click)="selectMiddle({ Name: '不限' })"
        >
          不限
        </div>
        <div
          class="item border-bottom"
          [class.border-bottom]="!isLast"
          [class.active]="middleSelected.Name === i.Name"
          *ngFor="let i of areaData.region; last as isLast"
          (click)="selectMiddle(i)"
        >
          {{ i.Name }}
        </div>
      </div>
      <!-- 地铁 -->
      <div class="middle" *ngIf="areaType === 2">
        <div
          class="item border-bottom"
          [class.active]="middleSelected.Name === '不限'"
          (click)="selectMiddle({ Name: '不限' })"
        >
          不限
        </div>
        <div
          class="item border-bottom"
          [class.border-bottom]="!isLast"
          [class.active]="middleSelected.Name === i.Name"
          *ngFor="let i of areaData.metro; last as isLast"
          (click)="selectMiddle(i)"
        >
          {{ i.Name }}
        </div>
      </div>
      <!-- 附近 -->
      <div class="middle" *ngIf="areaType === 3">
        <div
          class="item border-bottom"
          [class.active]="middleSelected.Name === i.Name"
          [class.border-bottom]="!isLast"
          *ngFor="let i of areaData.nearby; last as isLast"
          (click)="selectMiddle(i)"
        >
          {{ i.Name }}
        </div>
      </div>
      <!-- 区域第三级 -->
      <div class="inner" *ngIf="areaType === 1 && middleSelected.Landmarks && middleSelected.Landmarks.length > 0">
        <div
          class="item border-bottom"
          [class.active]="innerValue.length === 0"
          (click)="selectInner({ Name: '不限' })"
        >
          不限
        </div>
        <div
          class="item"
          [class.active]="innerValue.indexOf(j.Name) > -1"
          [class.border-bottom]="!isLast"
          *ngFor="let j of middleSelected.Landmarks; last as isLast"
          (click)="selectInner(j)"
        >
          <span class="text">{{ j.Name }}</span>
          <div class="right">
            <i class="icon icon-checkbox{{ innerValue.indexOf(j.Name) > -1 ? '-fill' : '' }}"></i>
          </div>
        </div>
      </div>
      <!-- 地铁第三级 -->
      <div class="inner" *ngIf="areaType === 2 && middleSelected.Stations && middleSelected.Stations.length > 0">
        <div
          class="item border-bottom"
          [class.active]="innerValue.length === 0"
          (click)="selectInner({ Name: '不限' })"
        >
          不限
        </div>
        <div
          class="item"
          [class.active]="innerValue.indexOf(j.Name) > -1"
          [class.border-bottom]="!isLast"
          *ngFor="let j of middleSelected.Stations; last as isLast"
          (click)="selectInner(j)"
        >
          <span class="text">{{ j.Name }}</span>
          <div class="right">
            <i class="icon icon-checkbox{{ innerValue.indexOf(j.Name) > -1 ? '-fill' : '' }}"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="footer border-top">
      <button class="btn btn-md btn-block btn-radius btn-reset" (click)="resetArea()">重置</button>
      <button class="btn btn-md btn-block btn-radius btn-gradient" (click)="confirmArea()">确定</button>
    </div>
  </div>
</cp-popup>
<!-- 价格 -->
<cp-popup [(show)]="priceShow" [maskClick]="true" otherClass="estate-index-popup">
  <div class="pricebox">
    <div class="body">
      <div class="left">
        <div class="item border-bottom" (click)="selectPriceType(1)" [class.active]="priceType === 1">单价</div>
        <div class="item" (click)="selectPriceType(2)" [class.active]="priceType === 2">总价</div>
      </div>
      <div class="right" *ngIf="priceType === 1">
        <p
          class="item"
          *ngFor="let i of priceData.single; last as isLast"
          [class.border-bottom]="!isLast"
          [class.active]="i.value === priceValue.value"
          (click)="selectPriceItem(i)"
        >
          {{ i.value }}
        </p>
      </div>
      <div class="right" *ngIf="priceType === 2">
        <p
          class="item"
          *ngFor="let j of priceData.muilty; last as isLast"
          [class.border-bottom]="!isLast"
          [class.active]="j.value === priceValue.value"
          (click)="selectPriceItem(j)"
        >
          {{ j.value }}
        </p>
      </div>
    </div>
    <div class="footer border-top">
      <div class="left">
        <span class="label">自定义：</span> <input type="tel" [(ngModel)]="minPrice" placeholder="最低" />
        <span> - </span> <input type="tel" [(ngModel)]="maxPrice" placeholder="最高" />
        <span class="unit">{{ priceType === 1 ? '元' : '万元' }}</span>
        <button
          class="btn btn-sm btn-radius btn-gradient"
          [disabled]="!(minPrice && maxPrice)"
          (click)="confirmPrice()"
        >
          确定
        </button>
      </div>
    </div>
  </div>
</cp-popup>
<!-- 户型 -->
<cp-popup [(show)]="layoutShow" [maskClick]="true" otherClass="estate-index-popup">
  <div class="layoutbox">
    <div class="body">
      <div
        class="item border-bottom"
        (click)="selectLayoutItem({ key: '0', value: '不限' })"
        [class.active]="layoutValue.length === 0"
      >
        <span class="left">不限</span>
      </div>
      <div
        class="item border-bottom"
        *ngFor="let item of layoutData"
        (click)="selectLayoutItem(item)"
        [class.active]="layoutValue.indexOf(item.key) > -1"
      >
        <span class="left">{{ item.value }}</span>
        <div class="right">
          <i class="icon icon-checkbox{{ layoutValue.indexOf(item.key) > -1 ? '-fill' : '' }}"></i>
        </div>
      </div>
    </div>
    <div class="footer">
      <button class="btn btn-md btn-block btn-radius btn-gradient" (click)="confirmLayout()">确定</button>
    </div>
  </div>
</cp-popup>
<!-- 更多 -->
<cp-popup [(show)]="moreShow" [maskClick]="true" otherClass="estate-index-popup">
  <div class="morebox">
    <div class="body">
      <div class="block" *ngFor="let block of moreData">
        <p class="title">{{ block.title }}</p>
        <div class="children">
          <div
            class="item"
            [class.active]="child.active"
            *ngFor="let child of block.children"
            (click)="selectMore(block.alias, child)"
          >
            {{ child.value }}
          </div>
        </div>
      </div>
      <div class="block">
        <p class="title">排序</p>
        <div class="children">
          <div
            class="item sorter-item"
            [class.last]="isLast"
            [class.active]="i.active"
            *ngFor="let i of moreSortData; last as isLast"
            (click)="selectSorter(i)"
          >
            {{ i.value }}
          </div>
        </div>
      </div>
    </div>
    <div class="footer border-top">
      <button class="btn btn-md btn-block btn-radius btn-reset" (click)="resetMore()">重置</button>
      <button class="btn btn-md btn-block btn-radius btn-gradient" (click)="confirmMore()">确定</button>
    </div>
  </div>
</cp-popup>
